<template>
  <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 xl:pt-1">
    <div
      class="max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-4"
    >
      <!-- 移动端 navbar 处理 -->
      <m-navbar v-if="isMobileTerminal" sticky :clickLeft="onNavbarLeftClick">
        精选会员
      </m-navbar>

      <div class="py-2 px-1">
        <h2
          class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
        >
          精选VIP
        </h2>
        <p class="text-center text-lg text-yellow-500">
          升级精选VIP，畅想所有内容
        </p>
        <div
          class="flex justify-between mt-5 overflow-auto pb-2 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent"
        >
          <template v-for="item in payDateList" :key="item.id">
            <pay-menu-item-vue
              :data="item"
              :hot="item.isHot"
              :select="item.id === currentPayData.id"
              @click="onCurrent"
            ></pay-menu-item-vue>
          </template>
        </div>
        <p class="mt-1 text-sm text-zinc-500">{{ currentPayData.desc }}</p>
        <!-- 支付 -->
        <payments class="mt-4"></payments>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'member'
}
</script>

<script setup>
import { useStore } from 'vuex'
import { isMobileTerminal } from '@/utils/flexible'
import payMenuItemVue from './components/pay-menu-item.vue'
import { getVipPayList } from '@/api/pay'
import payments from './components/paymentCn/index.vue'
import { ref } from 'vue'
const store = useStore()
const onNavbarLeftClick = () => {
  store.commit('app/changeRouterType', 'back')
}
const payDateList = ref([])
const currentPayData = ref({})
const getPayList = async () => {
  const res = await getVipPayList()
  payDateList.value = res
}
getPayList()
const onCurrent = (data) => {
  console.log(data)
  currentPayData.value = data
}
</script>

<style lang="scss" scoped></style>
